<template>
	<view class="container">
		<!-- 头部 -->
		<view class="heard">
			<text>欢迎使用拉钩招聘</text>
		</view>
		<!-- 表单部分 -->
		<view class="content">
			<view class="text">
				<text>账号:</text>
				<input v-model="form.username" type="text" placeholder="请输入账号"/>
			</view>
			<view class="text">
				<text>密码:</text>
				<input v-model="form.password" type="password" placeholder="请输入密码"/>
			</view>
			<view class="login_btn">
				<button @click="login">点击登录</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form:{
					username:'',
					password:''
				}
			}
		},
		methods: {
			async login(){
				const { username,password } = this.form;
				if(!username || !password){
					uni.showToast({
						title:'账号密码不能为空',
						icon: 'none' 
					});
					return
				}
				const res = await this.$axios.post('http://localhost:3000/api/login',{
				username:username.trim(),
				password:password.trim()
				})
				.then(res =>{
					uni.showToast({
						title: '登录成功',
						icon: 'success',
						duration: 1500
					});
					setTimeout(()=>{
						uni.navigateTo({
							url:'/pages/jobInformation/jobInformation'
						})
					},1000);
				})
				.catch(err =>{
					console.log(err.message)
					uni.showToast({
						title:'密码或账号错误',
						icon:'error',
						duration: 2000
					})
				})
			}
		}	
	}
</script>

<style scoped>

	.container{
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.heard{
		margin-top: 100rpx;
		font-size: 45rpx;
		text-align: center;
	}
	
	.content{
		margin-top: 80rpx;
		max-width: 90vw;
		padding: 40rpx;
		/* background-color: aqua; */
	}
	
	.content input{
		border-bottom: 2px solid rgba(210, 210, 210, 1);
		margin-bottom: 60rpx;
		font-size: 40rpx;
	}
	
	.text{
		display: flex;
		font-size: 40rpx;
	}
	
	.text text{
		margin-right: 20rpx;
	}

</style>
